<script setup lang="ts">
import { checkWhetherToJoin, getCommunityInfo, getCommunityMember, joinCommunity, leaveCommunity } from '@/api/community';
import { Community } from '@/api/community/type';
import { router } from '@/router';
import { useUserStore } from '@/store/user';
import { showDialog } from 'vant';
import { onMounted, ref, Ref } from 'vue';
const communityId = defineModel() as Ref<string>;
const community = ref({} as Community);
const member = ref(0);
const joined = ref(false);

onMounted(() => {
    getCommunityInfo(communityId.value).then(res => {
        community.value = res.data as Community;
    })
    getCommunityMember(communityId.value).then((res) => {
        member.value = res.data as number;
    })
    checkWhetherToJoin(communityId.value).then((res) => {
        joined.value = res.data as boolean;
    })
})

const join = () => {
    const userStore = useUserStore();
    joinCommunity(communityId.value, userStore.getId).then(() => {
        joined.value = true;
    })
}

const leave = () => {
    showDialog({
        message: '你确定要离开'+community.value.name+'吗？',
        showCancelButton: true,
        closeOnClickOverlay: true
    }).then(() => {
        const userStore = useUserStore();
        leaveCommunity(communityId.value, userStore.getId);
    }).catch(() => {

    });
}

const check = () => {
    const userStore = useUserStore();
    if (community.value.creator === userStore.getId) return true;
    else return false;
}

const toSetting = () => {
    router.push({
        name: "CommunitySetting",
        query: {
            'id': communityId.value
        }
    });
}

</script>

<template>
    <div class="info">
        <van-image radius="7px"
            width="100"
            height="100"
            :src="community.url"
        />
        <div class="center">
            <p class="name">{{ community.name }}</p>
            <div class="row">
                <span style="color: white; margin-right: 10px;">{{ member }}</span>
                <span style="color: white;">{{ community.title }}</span>
            </div>
        </div>
        <div class="right">
            <van-button size="small" style="width: 100%;" round type="primary" v-if="check()" @click="toSetting">管理</van-button>
            <van-button size="small" style="width: 100%;" round type="default" v-else-if="joined" @click="leave">已加入</van-button>
            <van-button size="small" style="width: 100%;" round type="primary" v-else @click="join">加入</van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.info {
    display: flex;
    background-color: rgba(81, 102, 194, 0.616);
    width: 94%;
    justify-content: space-between;
    padding: 3%;
    .center {
        width: 44%;
        display: flex;
        flex-direction: column;
        align-items: start;
        margin-left: 3%;
        margin-right: 3%;
        .name {
            font-size: 19px;
            .row {
                display: flex;
            }
        }
        p {
            color: white;
        }
    }
    .right {
        width: 20%;
        display: flex;
        align-items: center;
    }
}

</style>